<template>
	<view class="tp-bgf tp-pd30 tp-fc666 tp-fz28">
		<view class="level_align tp-lh54">
			<text class="tp-mr20">退回金额</text><text class="tp-red">￥{{info.refundMoney}}</text>
		</view>
		<view class="level_align tp-lh54">
			<text class="tp-mr20">退回账户</text><text class="tp-fc333">{{info.payType || ''}}</text>
		</view>
		<view class="tp-bgf level_align flex_between tp-pr tp-h88 tp-mt10">
			<view class="level_align tp-fc333 tp-fz30 ">
				<view class="tp-mr20 lan-line"></view>
				<text>退款原因</text>
			</view>
		</view>
		<view class="tp-bgf tp-pd30 tp-bcF5 tp-bbox">
			<view class="tp-lh44">
				<text class="tp-mr10 tp-fc333">退款原因：</text><text class="tp-fz26">{{info.cancelCause || ''}}</text>
			</view>
			<view class="tp-lh44">
				<text class="tp-mr10 tp-fc333">退款说明：</text><text class="tp-fz26">{{info.refundApplyDesc || ''}}</text>
			</view>
			
			<view class="tp-mt20 tp-w690 level_align flex_wrap">
				<view class="up-img tp-mb20 tp-pr" v-for="(item, index) in list" :index="index" :key="index" :style="{marginRight:(index+1)%4 == 0 ?'0':'10rpx'}">
					<image class="tp-br8" :src="item" mode="aspectFill" @click="previewImg(item)"></image>
				</view>
			</view>
		</view>

		<!-- 进度 S -->
		<view class="flex tp-mt30">
			<view class="left column_align tp-mr20">
				<view class="tp-pr" v-if="status > 1">
					<uni-icons  type="circle-filled" :size="[2,3].includes(status - 0) ? '26' : '14'" :color="status == 2 || status == 3? '#00B4FF' : '#ccc'"></uni-icons>
					<view class="right  flex flex_column tp-w520">
						<view class="tp-fc333 tp-fz28 ">
							{{status == 3 ? '退款已入账': status == 2 ? '退款已拒绝' : ''}}
						</view>
						<view class="tp-fz24 tp-fc999 tp-lh64">
							{{info.refundCheckTime || ''}}
						</view>
					</view>
				</view>
				<view class="line" v-if="status > 1"></view>
				<view class="icon-vw tp-w100 center_combo tp-pr">
					<uni-icons type="circle-filled" :size="'14'"  :color="'#ccc'"></uni-icons>
					<view class="right  flex flex_column tp-w520">
						<view class="tp-fc333 tp-fz28">
							等待后台审核
						</view>
						<view class="tp-fz24 tp-fc999 tp-lh64">
							{{info.refundCheckTime || ''}}
						</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="icon-vw  tp-w100 center_combo  tp-pr">
					<uni-icons type="circle-filled" :size="status == 1? '26' : '14'" :color="status == 1? '#00B4FF' : '#ccc'"></uni-icons>
					<view class="right flex flex_column tp-w520">
						<view class="tp-fc333 tp-fz28 ">
							发起退款申请
						</view>
						<view class="tp-fz24 tp-fc999 tp-lh64">
							{{info.cancelTime || ''}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 进度 E -->
		<view class="tp-h98">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageName: 'hotel', // hotel 酒店  scenic 景区  travel 旅游
				list: [],
				orderId: '', 
				info: {}, // 页面数据
				jindu: 2, // 进度
				status: 0, // 进度 1发起  2失败 3成功  不同订单 的订单状态码不一样  所以统一变量  酒店,景区 4.退款中5.失败.6.成功
			};
		},
		onLoad(opt) {
			this.pageName = opt.pageName
			this.orderId = opt.orderId
			this.getPageData()
		},
		methods:{
			// 获取退款进度
			getPageData(type) {
				let url = ''
				if(this.pageName == 'hotel'){
					url = this.$api.hotelRefunding + '?orderId=' + this.orderId
				} else 	if(this.pageName == 'scenic'){
					url = this.$api.scenicRefunding + '?orderId=' + this.orderId
				} else 	if(this.pageName == 'travel'){
					url = this.$api.travelGroupRefunding + '?orderId=' + this.orderId
				} else 	if(this.pageName == 'make'){
					url = this.$api.makeRefunding + '?orderId=' + this.orderId
				}
				this.$http.get(url).then(res => {
					if (res.code === 200) {
						this.info = res.data
						 let arr = res.data.refundApplyImg.split(',')
						 arr.map(item => {
							 let str = this.$imgUrl + item 
							this.list.push(str)
						 })
						if(this.pageName == 'hotel' || this.pageName == 'scenic' ){
							switch(res.data.status){
								case 4:
								    this.status = 1
								break;
								case 5:
								    this.status = 2
								break;
								case 6:
								    this.status = 3
								break;
								default:
								    this.status = 1
							}
						}else if(this.pageName == 'travel'  ){
							switch(res.data.status){
								case 5:
								    this.status = 1
								break;
								case 6:
								    this.status = 2
								break;
								case 7:
								    this.status = 3
								break;
								default:
								    this.status = 1
							}
						}else if(this.pageName == 'make'  ){
							switch(res.data.status){
								case 9:
								    this.status = 1
								break;
								case 10:
								    this.status = 2
								break;
								case 11:
								    this.status = 3
								break;
								default:
								    this.status = 1
							}
						}
					}
				})
			},
			// 预览图片
			previewImg(url) {
				console.log(url);
				// let arr = []
				// this.list
				uni.previewImage({
					current: url,
					urls: this.list,
					success: function(){
						console.log('预览')
					},
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.up-img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 4rpx;
	}

	.line {
		width: 2rpx;
		height: 122rpx;
		background: #CCCCCC;
		border-radius: 1rpx;
	}

	.icon-vw {
		margin-top: -2rpx;
	}

	.right {
		position: absolute;
		left: 80rpx;
		top: -8rpx;
		z-index: 10;
	}
</style>
